<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Bootstrap 模板</title>
	  
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	  
		<link href="css/bootstrap.min.css" rel="stylesheet">
 
		<script src="js/jquery.min.js"></script>
	  
		<script src="js/bootstrap.min.js"></script>
	</head>
	
	<body>
		<div class="page-header">
			<h2 align="center">查看新闻</h2>
		</div>
		<div class="container" style="font-family:微软雅黑;">
		<div class="col-md-8 col-md-offset-2">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">新闻内容</h3>
				</div>

				<div class="panel-body">
					<h3 align="center">${news.title}</h3>
					<p align="center">
						作者：${news.author}
						&nbsp;&nbsp;&nbsp;&nbsp;
						时间：${news.createDate}
					</p>
					
<#--					<p>这几年，联想挣钱不少但日子挺不爽的，动不动就被喷，估计他们也很诧异，为啥总有刁民想害朕？</p>
<p>比如上周，在华为风口浪尖的紧急关头，<strong>有人说“联想断供华为”，</strong>然后舆论哗然，末了，这人道歉，说信息核实有问题等等。同期，联想的杨元庆也表态，希望将造谣者绳之以法。</p> 
<p>这个消息被广泛传播是有基础的，那就是前两年广泛传播的“5G投票事件“，<strong>说的是联想的一票让华为输掉了5G标准，</strong>吃瓜群众当然不淡定了，为此，去年5月，联想的领袖柳传志发出了“行动起来，誓死打赢联想荣誉保卫战”的号召，一年以后，到了2019年5月，联想集团公号发布文章《解密那场不存在的联想5G投票事件》，大意就是联想这么忍辱负重，类似的攻击咋还是没完没了？</p> 
<p>背后有啥势力咱也不知道，咱也不敢乱猜。按理说，情势紧张，那就低调点呗，然后上周联想CFO接受采访时的一番话又刷屏了，当时的消息称CFO是这么说的，<strong>“若美国征收更多关税，我们就将生产线搬出中国”</strong>，不出所料的，舆论圈爆炸了，科技战的尖峰时刻，一个曾经被视为“全村希望的科技龙头”这么表态，大众情绪不沸腾很难。</p> 
	-->
					<p>${news.context}</p>
				
				<table class="table">
							<tr class="success">
								<td>回帖区</td>
							</tr>

					<#list commentsList as comments>
						<tr id="commentDiv">
							<td>
								<p>${comments.commentContent}</p>
								<div align="right">${comments.phoneNo}&nbsp;&nbsp;&nbsp;&nbsp;${comments.createTime}</div>
							</td>
						</tr>
					</#list>
					<tr class="success">
						<td>写评论</td>
					</tr>
				</table>

<form role="form" action="/addComments">
	<input type="hidden" id="newsCode" name="newsCode" value="${newsCode}"/>
	<div class="form-group">
		<input type="text" class="form-control" placeholder="您的手机号...." id="phoneNo" name="phoneNo">
	</div>
	<div class="form-group">
		<textarea class="form-control" id="commentContent" name="commentContent">您的评论....</textarea>
	</div>
	<div class="form-group" align="center">
		<button type="button" class="btn btn-default" id="addComments">提交评论</button>
	</div>
 </form>	

</div>
				
			</div>
		</div>
		</div>
		
	</body>

	<script type="text/javascript">
		$(document).ready(function () {
			$("#addComments").click(function(){
				let phoneNo = $("#phoneNo").val();
				if(phoneNo == null || phoneNo == ''){
					alert("手机号不能为空");
					return false;
				}
				let commentContent = $("#commentContent").val();
				if(commentContent == null || commentContent == ''){
					alert("评论不能为空");
					return false;
				}
				$.ajax({
					url:"/addComments",    //请求的url地址
					dataType:"json",   //返回格式为json
					async:true,//请求是否异步，默认为异步，这也是ajax重要特性
					data:{
						phoneNo:$("#phoneNo").val(),
						commentContent:$("#commentContent").val(),
						newsCode:$("#newsCode").val()
					},    //参数值
					type:"GET",   //请求方式
					complete:function(){
						//请求完成的处理
						$.ajax({
							url:"/showDetail",    //请求的url地址
							dataType:"json",   //返回格式为json
							async:true,//请求是否异步，默认为异步，这也是ajax重要特性
							data:{newsCode:$("#newsCode").val()},    //参数值
							type:"GET",   //请求方式
							complete:function(data){
							$("#phoneNo").val("");
								$("#commentContent").val("");
								alert(data);
								let str = '<tr id="commentDiv"><td><p>${comments.commentContent}</p><div align="right">${comments.phoneNo}&nbsp;&nbsp;&nbsp;&nbsp;${comments.createTime}</div></td></tr>';
								$("#commentDiv").html(str);
							}
						})
					}
				});
			});
		})
	</script>
</html>